<template>
   <el-dialog :title="showTitle" :visible="showDialog" @close="close">
      <!-- 弹窗内容 -->
      <el-form ref="addDepts" :model="formDate" :rules="rules" label-width="120px" size="mini">
         <el-form-item prop="name" label="部门名称" required>
            <el-input v-model="formDate.name" placeholder="2-10个字符"></el-input>
         </el-form-item>
         <el-form-item prop="code" label="部门编码" required>
            <el-input v-model="formDate.code" placeholder="2-10个字符"></el-input>
         </el-form-item>
         <el-form-item prop="managerId" label="部门负责人" required>
            <el-select v-model="formDate.managerId" placeholder="请选择负责人">
               <!-- 下拉选项 -->
               <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>
         </el-form-item>
         <el-form-item prop="introduce" label="部门介绍" required>
            <el-input v-model="formDate.introduce" type="textarea" :row="4" placeholder="1-100个字符"></el-input>
         </el-form-item>
         <el-form-item>
            <el-row type="flex" justify="center">
               <el-col :span="12">
                  <el-button type="primary" @click="handleConfirm">确认</el-button>
                  <el-button @click="handleCancel">取消</el-button>
               </el-col>
            </el-row>
         </el-form-item>
      </el-form>
   </el-dialog>
</template>

<script>
import {
   getDepartment,
   getManagerList,
   addDepartment,
   changeDepartment,
   getDepartmentDetail
} from '@/api/department'

export default {
   name: 'AddDepts',
   props: {
      showDialog: {
         type: Boolean,
         default: false
      },
      currentNodeId: {
         type: Number,
         default: null
      }
   },
   data() {
      return {
         managerList: [],
         formDate: {
            code: '',
            introduce: '',
            managerId: '',
            name: '',
            pid: ''
         },
         rules: {
            code: [
               { required: true, message: '部门编码不能为空', trigger: 'blur' },
               { min: 2, max: 10, message: '部门编码的长度为2-10个字符', trigger: 'change' },
               {
                  trigger: 'blur',
                  validator: async (rule, value, callback) => {
                     let result = await getDepartment()
                     // 判断是否为编辑模式
                     if (this.formDate.id) {
                        result = result.filter(item => item.id !== this.formDate.id)
                     }
                     if (result.some(item => item.code === value)) {
                        callback(new Error('部门中已经有该编码了'))
                     } else {
                        callback()
                     }
                  }
               }
            ],
            introduce: [
               { required: true, message: '部门介绍不能为空', trigger: 'blur' },
               { min: 1, max: 100, message: '部门介绍的长度为1-100个字符', trigger: 'change' }
            ],
            managerId: [
               { required: true, message: '部门负责人不能为空', trigger: 'blur' }
            ],
            name: [
               { required: true, message: '部门名称不能为空', trigger: 'blur' },
               { min: 2, max: 10, message: '部门名称的长度为2-10个字符', trigger: 'change' },
               {
                  trigger: 'blur',
                  validator: async (rule, value, callback) => {
                     let result = await getDepartment()
                     if (this.formDate.id) {
                        result = result.filter(item => item.id !== this.formDate.id)
                     }
                     if (result.some(item => item.name === value)) {
                        callback(new Error('部门中已经有该名称了'))
                     } else {
                        callback()
                     }
                  }
               }
            ]
         }
      }
   },
   computed: {
      showTitle() {
         return this.formDate.id ? '编辑部门' : '新增部门'
      }
   },
   created() {
      this.getManagerList()
   },
   methods: {
      close() {
         // 清空对象
         this.formDate = {
            code: '',
            introduce: '',
            managerId: '',
            name: '',
            pid: ''
         }
         // 修改父组件的值
         this.$refs.addDepts.resetFields()
         this.$emit('update:showDialog', false)
      },
      handleConfirm() {
         // 确认事件
         this.$refs.addDepts.validate(async isOk => {
            let msg = '新增'
            if (isOk) {
               // 通过formData中id
               if (this.formDate.id) {
                  // 编辑场景
                  msg = '更新'
                  await changeDepartment(this.formDate)
               } else {
                  // 新增场景
                  await addDepartment({ ...this.formDate, pid: this.currentNodeId })
               }
               this.$emit('addDepartment')
               this.$message.success(`${msg}部门成功`)
               this.close()
            }
         })
      },
      handleCancel() {
         // 取消事件
         this.close()
      },
      async getManagerList() {
         const result = await getManagerList()
         this.managerList = result
      },
      // 获取组件详情
      async getDepartmentDetail() {
         const result = await getDepartmentDetail(this.currentNodeId)
         this.formDate = result
      }
   }
}
</script>
